<template>
<view style="padding: 32rpx;">
  <view style="background: #fff; border-radius: 18rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04); padding: 28rpx;">
    <!-- 标题 -->
    <view style="font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 18rpx;">
      租赁土地：{{order.fieldName}}
    </view>
	<u-divider></u-divider>
	
    <!-- 图片 -->
    <image 
      :src="order.fieldImage" 
      style="width: 100%; height: 220rpx; object-fit: cover; border-radius: 10rpx; margin-bottom: 22rpx;"
      mode="aspectFill"
    />
    <!-- 信息列表 -->
    <view style="display: flex; flex-direction: column; gap: 18rpx;">
      <view style="display: flex;">
        <view style="width: 180rpx; color: #888; font-size: 26rpx;">土地编号：</view>
        <view style="color: #333; font-size: 26rpx;">{{ order.plotId }}</view>
      </view>
      <view style="display: flex;">
        <view style="width: 180rpx; color: #888; font-size: 26rpx;">土地简介：</view>
        <view style="color: #333; font-size: 26rpx;">{{ order.plotId }}</view>
      </view>
      <view style="display: flex;">
        <view style="width: 180rpx; color: #888; font-size: 26rpx;">土地价格：</view>
        <view style="color: #333; font-size: 26rpx;">{{ order.orderAmount }}元</view>
      </view>
      <view style="display: flex;">
        <view style="width: 180rpx; color: #888; font-size: 26rpx;">土地面积：</view>
        <view style="color: #333; font-size: 26rpx;">{{ order.plotArea }}㎡</view>
      </view>
      <view style="display: flex;">
        <view style="width: 180rpx; color: #888; font-size: 26rpx;">订单号：</view>
        <view style="color: #333; font-size: 26rpx;">{{ order.plotOrderNum }}</view>
      </view>
      <view style="display: flex;">
        <view style="width: 180rpx; color: #888; font-size: 26rpx;">下单日期：</view>
        <view style="color: #333; font-size: 26rpx;">{{ formatDate(order.createdAt) }}</view>
      </view>
    </view>
    <!-- 新增分割线 -->
    <u-divider></u-divider>
	<view style="font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 18rpx;">
      服务信息
	</view>
	<view style="display: flex; flex-direction: column; gap: 18rpx;">
      <view style="display: flex;">
        <view style="width: 180rpx; color: #888; font-size: 26rpx;">服务类型：</view>
        <view style="color: #333; font-size: 26rpx;">{{ order.serviceName }}</view>
      </view>
      <view style="display: flex;">
        <view style="width: 180rpx; color: #888; font-size: 26rpx;">服务内容：</view>
        <view style="color: #333; font-size: 26rpx;">{{ order.serviceDesc }}</view>
      </view>
      <view style="display: flex;">
        <view style="width: 180rpx; color: #888; font-size: 26rpx;">每日费用：</view>
        <view style="color: #333; font-size: 26rpx;">{{ order.servicePrice }}元</view>
      </view>
      <view style="display: flex;">
        <view style="width: 180rpx; color: #888; font-size: 26rpx;">服务周期：</view>
        <view style="color: #333; font-size: 26rpx;">{{ order.leastTime }}天</view>
      </view>
    </view>
	<u-divider></u-divider>


	<view style="font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 18rpx;">
      种子信息
	</view>
	<view style="display: flex; flex-direction: column; gap: 18rpx;">
    <view style="width: 100%; overflow-x: auto;">
      <view style="display: table; width: 100%; border-collapse: collapse;">
        <!-- 表头 -->
        <view style="display: table-row; background: #f5f5f5;">
          <view style="display: table-cell; padding: 16rpx 8rpx; font-weight: bold; border: 1px solid #eee;">名称</view>
          <view style="display: table-cell; padding: 16rpx 8rpx; font-weight: bold; border: 1px solid #eee;">种植面积</view>
          <view style="display: table-cell; padding: 16rpx 8rpx; font-weight: bold; border: 1px solid #eee;">金额</view>
        </view>
        <!-- 示例数据行，可根据实际数据v-for渲染 -->
        <view style="display: table-row;" v-for="(item,index) in cropList" :key="index">
          <view style="display: table-cell; padding: 16rpx 8rpx; border: 1px solid #eee;">{{ item.cropName }}</view>
          <view style="display: table-cell; padding: 16rpx 8rpx; border: 1px solid #eee;">{{ item.cropNum }}㎡</view>
          <view style="display: table-cell; padding: 16rpx 8rpx; border: 1px solid #eee;">{{ item.cropNum*item.cropPrice }}元</view>
        </view>
      </view>
    </view>
    </view>

	<u-divider></u-divider>
	<view style="font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 18rpx;">
      订单信息
	</view>
	<view style="display: flex; flex-direction: column; gap: 18rpx;">
      <view style="display: flex;">
        <view style="width: 180rpx; color: #888; font-size: 26rpx;">收货人：</view>
        <view style="color: #333; font-size: 26rpx;">007地块</view>
      </view>
      <view style="display: flex;">
        <view style="width: 180rpx; color: #888; font-size: 26rpx;">收货地址：</view>
        <view style="color: #333; font-size: 26rpx;">有山有水有树林，山泉水有点田</view>
      </view>
      <view style="display: flex;">
        <view style="width: 180rpx; color: #888; font-size: 26rpx;">收货电话：</view>
        <view style="color: #333; font-size: 26rpx;">0.10元</view>
      </view>
      <view style="display: flex;">
        <view style="width: 180rpx; color: #888; font-size: 26rpx;">付款时间：</view>
        <view style="color: #333; font-size: 26rpx;">5㎡</view>
      </view>
	  <view style="display: flex;">
        <view style="width: 180rpx; color: #888; font-size: 26rpx;">付款金额：</view>
        <view style="color: #333; font-size: 26rpx;">5㎡</view>
      </view>
    </view>
  </view>
   
 
</view>


</template>

<script>
import request from 'util/request.js'
	export default {
		data() {
			return {
				plotOrderNum:0,
				order:[],
        cropList:[]
			}
		},
		methods: {
			getDetailOrder(){
				request({
					url: `/land-service/land/selectByOrderNum`,
					method: 'GET',
					data: {
						plotOrderNum: this.plotOrderNum,
					}
				}).then(res => {
					if(res.code == 200) {
						this.order = res.data.Order;
						this.order.fieldImage =`http://121.36.197.175:19000/test/${this.order.fieldImage}`
					}
				})
			},
      getCropList(){
        request({
					url: `/land-service/land/selectCropByOrderNum`,
					method: 'GET',
					data: {
						plotOrderNum: this.plotOrderNum,
					}
				}).then(res => {
					if(res.code == 200) {
						this.cropList = res.data.crops;
						console.log(this.cropList);
					}
				})
      },
			formatDate(date) {
				// 时间戳转正常日期（yyyy-mm-dd）
				if (!date) return '';
				const d = new Date(date);
				const year = d.getFullYear();
				const month = (d.getMonth() + 1).toString().padStart(2, '0');
				const day = d.getDate().toString().padStart(2, '0');
				return `${year}-${month}-${day}`;
			
			}
		},
		mounted() {
			this.getDetailOrder()
			this.getCropList()

		},
		onLoad(options) {
			// 获取上个页面url中的orderid
			this.plotOrderNum = options.id;
			console.log('获取到的orderId:', this.id);

		}
	}
</script>

<style scoped>


</style>
